<%@page import="org.springframework.web.context.request.SessionScope"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>books</title> 
<link rel="stylesheet" href="common/css/pintuer.css">
<link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrapUI.css">
<link rel="stylesheet" href="common/css/popupUI.css">
<script type="text/javascript" src="component/jquery1.4.4.js"></script>	
<script type="text/javascript" src="common/js/book/bookBackend_separate.js"></script>
 
</head>
<body>

	<div class="admin">
    <div class="panel admin-panel" style="margin-top:5px">
    	<div class="panel-head" style="text-align:center"><strong ><spring:message code="BookList"/></strong></div>
        <div class="padding border-bottom" >
       <!--    =========================================================================   -->
        <span id="fusionSearch" style="dispaly:inline" style="align:left">
		<form style="display:inline" action="fusionSearchBook.action?number=1">
		<input name="number" type="hidden" value=1 />
		     <input id="bookStatusHidden" type="hidden" value="${sessionScope.bookState}" />
		<label><spring:message code="BOOKNAME"/></label>
			<input class="input" name="bookName" id="bookName" type="text" placeholder="<spring:message code="ENTERBOOKNAME"/>" style="display:inline;width:135px" value="${bookName}">
		<label><spring:message code="BOOKAUTHOR"/></label>
			<input class="input" name="bookAuthor" id="bookAuthor" type="text" placeholder="<spring:message code="ENTERBOOKAUTHOR"/>" style="display:inline;width:100px" value="${bookAuthor}">
		<label><spring:message code="BOOKPRESS"/></label>
			<input class="input" name="bookPress" id="bookPress" type="text" placeholder="<spring:message code="ENTERBOOKPRESS"/>" style="display:inline;width:100px" value="${bookPress}">
		<label style="margin-left:20px"><spring:message code="BOOKSTATE"/></label>
			<select class="input" style="display:inline;width:60px" name="bookState" id="bookState">
				   <option id="status2" value="2"><spring:message code="ALL"/></optioin>
			       <option id="status0" value="0"><spring:message code="borrowed"/></optioin> 
			       <option id="status1" value="1"><spring:message code="Ontheshelf"/></optioin>
        	</select>
			<input type="submit" style="margin-left:10px" class="button button-small border-blue" value="<spring:message code="search"/>"/>
			</form>
		</span>
		
		<!--    =========================================================================   -->
		
     	    <a id="deleteButton" type="button" class="button button-small border-yellow " style="float:right;margin-right:10px"><spring:message code="DELETECHECKED"/></a>
     	    <a type="button" class="button button-small border-blue" id="addBook" style="float:right"><spring:message code="ADDBOOK"/></a>
     	   
        </div>
        <table class="table table-hover" style="table-layout:fixed">
        	<tr>
        	<th width="10" style="text-align:center"><input id="checkAll" type="checkbox"></th>
        	<th width="30" style="text-align:center"><spring:message code="NO"/></th>
        	<th width="80" style="text-align:center"><spring:message code="BOOKNAME"/></th>
        	<th width="100" style="text-align:center"><spring:message code="BOOKIMAGE"/></th>
        	<th width="60" style="text-align:center"><spring:message code="BOOKAUTHOR"/></th>
        	<th width="60" style="text-align:center"><spring:message code="BOOKPRESS"/></th>
        	<th width="60" style="text-align:center"><spring:message code="PUBLISHDATE"/></th>
        	<th width="60" style="text-align:center">ISBN</th>
        	<th width="60" style="text-align:center"><spring:message code="BOOKSTATE"/></th>
        	<th width="120" style="text-align:left"><spring:message code="OPERATION"/></th>
        	</tr>
        	<% Integer listCountNumber = (Integer)session.getAttribute("number");
        	listCountNumber=listCountNumber*7-6;%> 
             <c:if test="${!empty searchBookList }">  
                <c:forEach items="${searchBookList}" var="book_detail">  
                    <tr>
                    	<td style="text-align:center"><input name="subBox" type="checkbox" value="${book_detail.bookId }"></td>
                        <td style="text-align:center"><%=listCountNumber++ %></td>
                        <td style="text-align:center;white-space:nowrap;overflow:hidden">${book_detail.bookName }</td>
                        <td style="text-align:center;white-space:nowrap;overflow:hidden">${book_detail.bookImage }</td>
                        <td style="text-align:center;white-space:nowrap;overflow:hidden">${book_detail.bookAuthor }</td>
                        <td style="text-align:center;white-space:nowrap;overflow:hidden">${book_detail.bookPress }</td>
                        <td style="text-align:center;white-space:nowrap;overflow:hidden"><fmt:formatDate value="${book_detail.bookPublishdate}" pattern="yyyy-MM-dd"/></td>
                        <td style="text-align:center;white-space:nowrap;overflow:hidden">${book_detail.bookIsbn }</td>  
                        <td style="text-align:center;white-space:nowrap;overflow:hidden">
                        <c:if test="${book_detail.bookState == 0}">
                        <spring:message code="borrowed"/>
                        </c:if>
                        <c:if test="${book_detail.bookState == 1}">
                        <spring:message code="Ontheshelf"/>
                        </c:if>
                        </td>
                        <td style="text-align:left">  
                        <a class="button border-blue button-little editBookButton" style="cursor:pointer"><input class="bookIdCurrent" type="hidden" value="${book_detail.bookId}"><spring:message code="Edit"/></a> 
                        <a class="button border-yellow button-little deleteBookSingle" style="cursor:pointer" ><input class="bookIdCurrent" type="hidden" value="${book_detail.bookId}"><spring:message code="Delete"/></a>
                        <c:if test="${book_detail.bookState == 0}">
                        	<%-- <a class="button border-blue button-little" style="margin-top:5px" onclick= "window.location.href='showBorrowByBook.action?borrowBookid=${book_detail.bookId}'"><spring:message code="BORROWDETAIL"/></a> --%>
                        	<a class="button border-yellow button-little showBorrow" style="cursor:pointer" ><input class="borrowBookIdCurrent" type="hidden" value="${book_detail.bookId}"><spring:message code="BORROWDETAIL"/></a>                                      
	                    </c:if>  
                        </td>  
                    </tr>               
                </c:forEach>  
            </c:if>  
          </table>
          
          <div class="panel-foot text-right">
           <ul class="pagination"><li><a href="fusionSearchBook.action?number=1&bookName=${sessionScope.bookName}&bookAuthor=${sessionScope.bookAuthor}&bookPress=${sessionScope.bookPress}&bookState=${sessionScope.bookState}"><spring:message code="FirstPage"/></a></li></ul>
           <ul class="pagination"><li><a href="fusionSearchBook.action?number=${sessionScope.number-1}&bookName=${sessionScope.bookName}&bookAuthor=${sessionScope.bookAuthor}&bookPress=${sessionScope.bookPress}&bookState=${sessionScope.bookState}"><spring:message code="Last"/></a></li></ul>
           <ul class="pagination"><li><a href="fusionSearchBook.action?number=${sessionScope.number+1}&bookName=${sessionScope.bookName}&bookAuthor=${sessionScope.bookAuthor}&bookPress=${sessionScope.bookPress}&bookState=${sessionScope.bookState}"><spring:message code="Next"/></a></li></ul>
           <ul class="pagination"><li><a href="fusionSearchBook.action?number=${sessionScope.count}&&bookName=${sessionScope.bookName}&bookAuthor=${sessionScope.bookAuthor}&bookPress=${sessionScope.bookPress}&bookState=${sessionScope.bookState}"><spring:message code="Final"/></a></li></ul>
           <font style="line-height:2.5"><spring:message code="currentpage"/>${sessionScope.number}/${sessionScope.count}</font>
        </div>
     </div>
  </div> 
  
  <!-- popup add -->
	<div class="fullScreen" id="addBookPopup" >
		<div class="modal-content">
			<div class="popup">
				<div class="modal-header" style="height:50">
					<div class="row">
						<div class="col col-md-11" id="articleTitle">
					<h3 class='modal-title' style="font-size:18px;color:gray;padding:10px 10px"><spring:message code="ADDBOOK"/></h3>
						</div>
						<div class="col-md-1">
							<button type="button" class="close close-lg" id="closePopup">×</button>
						</div>
					</div>
				</div>
				<div id="MailerContentArea"  style="height:350px;">
					<div class="mailerContent" id="articleContentIndex">
						<%-- ${content} --%>

							<div class="tab-panel active" id="tab-set" style="width:58%;float:left;">
								<form action="saveBook.action" method="post" name="book" class="form-x" enctype="multipart/form-data">
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Name"/></label>
										</div>
										<div class="field">
											<input type="text" class="input" id="addBookName"
												name="addBookName" size="35" placeholder="Name"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Image"/></label>
										</div>
										<div class="field" style="width:100px;">
											<input type="file" class="input" id="addBookImage"
												name="addBookImage" size="35" placeholder="Image"
												value=""/>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Author"/></label>
										</div>
										<div class="field">
											<input type="text" class="input" id="addBookAuthor"
												name="addBookAuthor" size="35" placeholder="Author"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Press"/></label>
										</div>
										<div class="field">
											<input type="text" class="input" id="addBookPress"
												name="addBookPress" size="35" placeholder="Press"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>
									
									<div class="form-group">
										<div class="label" style="width:25%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="PUBLISHDATE"/></label>
										</div>
										<div class="field">
											<input id="addbookPublishdate" type="date" class="input" style="display:inline;width:250px;cursor:pointer" name="addbookPublishdate"
												placeholder="Publishdate" value=""/><br>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:14%;">
											<label style="color:black;font-weight:lighter;">Isbn</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="addBookIsbn"
												name="addBookIsbn" size="35" placeholder="Isbn"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>
									<input type="submit" value="<spring:message code="addadd"/>" class="button button-small border-blue" style="margin-left:400px;"/>
								</form>
							</div>
							
							<div style="float:right;width:40%;">
								<div class="label">
									<label style="color:black;font-weight:lighter;font-size: 15px;margin-top: 25px;"><spring:message code="Showpicture"/></label>
								</div>
								<div id="showAdd" style="width:200px;height:240px;"></div>
							</div>
							
						</div>
				</div> 
			</div>
		</div>		
	</div>
	
  <!-- popup edit -->
  <div class="fullScreen" id="editBookPopup" >
		<div class="modal-content">
			<div class="popup">
				<div class="modal-header" style="height:50">
					<div class="row">
						<div class="col col-md-11" id="articleTitle">
					<h3 class='modal-title' style="font-size:18px;color:gray;padding:10px 10px"><spring:message code="EditBook"/></h3>
						</div>
						<div class="col-md-1">
							<button type="button" class="close close-lg" id="closeEditPopup">×</button>
						</div>
					</div>
				</div>
				<div id="MailerContentArea"  style="height:350px;">
					<div class="mailerContent" id="articleContentIndex">
							<div class="tab-panel active" id="tab-set" style="width:58%;float:left;">
								<form action="updateBook.action" method="post" name="book" class="form-x" enctype="multipart/form-data">
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Name"/></label>
										</div>
										<div class="field">
											<input type="text" class="input" id="editBookName"
												name="editBookName" size="35" placeholder="Name"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Image"/></label>
										</div>
										<div class="field" style="width:100px;">
											<input type="file" class="input" id="editBookImage"
												name="editBookImage" size="35" placeholder="Image"
												value=""/>
											<input type="hidden" name="editBookImageNull" id="editBookImageNull" value=""/>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Author"/></label>
										</div>
										<div class="field">
											<input type="text" class="input" id="editBookAuthor"
												name="editBookAuthor" size="35" placeholder="Author"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:15%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="Press"/></label>
										</div>
										<div class="field">
											<input type="text" class="input" id="editBookPress"
												name="editBookPress" size="35" placeholder="Press"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>
									
									<div class="form-group">
										<div class="label" style="width:25%;">
											<label style="color:black;font-weight:lighter;"><spring:message code="PUBLISHDATE"/></label>
										</div>
										<div class="field">
											<input id="editBookPublishdate" type="date" class="input" style="display:inline;width:250px;cursor:pointer" name="editBookPublishdate"
												placeholder="Publishdate" value=""/><br>
										</div>
									</div>
									
									<div class="form-group" style="margin-top:20px;">
										<div class="label" style="width:14%;">
											<label style="color:black;font-weight:lighter;">Isbn</label>
										</div>
										<div class="field">
											<input type="text" class="input" id="editBookIsbn"
												name="editBookIsbn" size="35" placeholder="Isbn"
												data-validate="required:<spring:message code="Pleaseinput"/>"  value=""/>
										</div>
									</div>

									<input type="submit" value="<spring:message code="Save"/>" class="button button-small border-blue" style="margin-left:400px;"/>
								</form>
							</div>
							
							<div style="float:right;width:40%;">
								<div class="label">
									<label style="color:black;font-weight:lighter;font-size: 15px;margin-top: 25px;"><spring:message code="Showpicture"/></label>
								</div>
								<div id="showEdit" style="width:200px;height:240px;"></div>
							</div>
							
						</div>
				</div> 
			</div>
		</div>		
	</div>
  
  <!-- 多删除弹窗 -->
	<div class="fullScreen" id="deleteBooksPopup" >
		<div class="modal-content" style="height:250px;width:350px;margin-left:18%;border-radius:5px;" >
			<div class="popup">
			<div class="modal-header" style="height:20px;background-color:white;border-bottom:0px;">
			<div style="margin-left:20px;margin-top:90px;font-size:20px;"><spring:message code="suredelete"/></div>
			
			<button type="button" id="cancel" class="button button-small border-blue" style="margin-top:40px;margin-left:60px;width:100px;height:40px;font-size:16px;"><spring:message code="Cancel"/></button>
			
			<button type="button" id="sureDeleteButton" class="button button-small border-blue" style="margin-left:30px;margin-top:40px;width:100px;height:40px;font-size:16px;"><spring:message code="Sure"/></button>
			
		
				</div> 
			</div>
		</div>		
	</div>
	
	<!-- 未选弹窗 -->
	<div class="fullScreen" id="NoChecked" >
		<div class="modal-content" style="height:250px;width:350px;margin-left:18%;border-radius:5px;" >
			<div class="popup">
			<div class="modal-header" style="height:20px;background-color:white;border-bottom:0px;">
			<div style="text-align:center;margin-top:90px;font-size:20px"><spring:message code="Nothingselected"/></div>
			<button type="button" id="noChosedClose" class="button button-small border-blue" style="margin-left:120px;margin-top:40px;text-align:center; width:100px;height:40px;font-size:16px;"><spring:message code="OK"/></button>
				</div> 
			</div>
		</div>		
	</div>
	
	<!-- 单个问卷删除弹窗 -->
	  <div class="fullScreen" id="deleteSingleBook" >
			<div class="modal-content" style="height:250px;width:350px;margin-left:18%;border-radius:5px;" >
				<div class="popup">
				<div class="modal-header" style="height:20px;background-color:white;border-bottom:0px;">
				<div style="margin-left:20px;margin-top:90px;font-size:20px;"><spring:message code="suredeletesingle"/></div>
				
				<button type="button" id="cancelSingleBook" class="button button-small border-blue" style="margin-top:40px;margin-left:60px;width:100px;height:40px;font-size:16px;"><spring:message code="Cancel"/></button>
				
				<button type="button" id="sureSingleBook" class="button button-small border-blue" style="margin-left:30px;margin-top:40px;width:100px;height:40px;font-size:16px;"><spring:message code="Sure"/></button>
				
					</div> 
				</div>
			</div>		
		</div>
	
	<!-- popup show borrow -->
  <div class="fullScreen" id="borrowBookPopup" >
		<div class="modal-content">
			<div class="popup">
				<div class="modal-header" style="height:50">
					<div class="row">
						<div class="col col-md-11" id="articleTitle">
					<h3 class='modal-title' style="font-size:18px;color:gray;padding:10px 10px"><spring:message code="BORROWDETAIL"/></h3>
						</div>
						<div class="col-md-1">
							<button type="button" class="close close-lg" id="closeBorrowPopup">×</button>
						</div>
					</div>
				</div>
				<div id="MailerContentArea"  style="height:350px;">
					<div class="showBorrowContent" id="articleContentIndex" style="margin-left:50px;width:60%;margin-top:50px;height:60%">
							
					</div>
				</div> 
			</div>
		</div>		
	</div>
  
</body>
</html>